<!-- 主机管理 -->
<template>
  <div>
    <div class="search-btn">
      <div @keydown.enter="getTableList">
        <el-date-picker v-model="queryParam.createTime" class="search-item" clearable  type="date" placeholder="请选择任务创建时间" />
        <el-input v-model="queryParam.taskName_like" class="search-item" clearable  placeholder="请输入任务名称"></el-input>
        <el-button type="primary"  class="search-item" @click="getTableList">搜索</el-button>
        <el-button  @click="resetForm">重置</el-button>
      </div>
      <div>
        <el-button type="primary"  @click="openEdit">新增</el-button>
      </div>
    </div>
    <el-table ref="table" :data="table.list" v-loading="table.loading">
      <el-table-column prop="name" label="名称"></el-table-column>
      <el-table-column prop="ip" label="IP"></el-table-column>
      <el-table-column prop="port" label="端口"></el-table-column>
      <el-table-column prop="username" label="用户名"></el-table-column>
      <el-table-column prop="remarks" label="备注"></el-table-column>
      <el-table-column label="操作" width="210px" fixed="right">
        <template #default="{row}">
          <el-button type="primary" size="small" @click="openEdit(row)">编辑</el-button>
          <el-button type="warning" size="small"  @click="deleteRow(row)">删除</el-button>
          <el-dropdown style="margin-left: 10px;" @command="com=>handleCommand(com, row)">
            <el-button type="success" size="small">更多<el-icon class="el-icon--right"><arrow-down /></el-icon></el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="link">连接</el-dropdown-item>
                <el-dropdown-item command="firewall">防火墙</el-dropdown-item>
                <el-dropdown-item command="route">路由</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>

    <HostEdit ref="edit" @confirm="getTableList"></HostEdit>
  </div>
</template>

<script>
import HostApi from '@/api/host.api';
import {ElTableExt} from 'components-extent';

import { ArrowDown } from '@element-plus/icons-vue';

import HostEdit from './edit.vue';

export default {
  mixins: [ElTableExt],
  components: {HostEdit, ArrowDown},
  data () {
    return {
      api: HostApi
    };
  },
  methods: {
    getTableListAfter(data){
      return {
        records: data,
      };
    },
    handleCommand(com, row){
      this['handle'+com](row);
    },
    handlelink(row){
      this.$router.push({path: '/link', query: {hostId: row.id}});
    },
    handlefirewall(row){
      this.$router.push({path: '/firewall', query: {hostId: row.id}});
    },
    handleroute(row){
      this.$router.push({path: '/route', query: {hostId: row.id}});
    },
  }
};
</script>

<style scoped>
</style>
